<template>
  <el-container>
    <el-header style="background-color: #000000;">审批信息</el-header>
    <el-main>
      <el-form :inline="true" :model="pageObject" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="pageObject.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="申请类别">
          <el-select v-model="pageObject.vacationWay" placeholder="请选择申请类型">
            <el-option label="不限" value="不限"></el-option>
            <el-option label="出差" value="出差"></el-option>
            <el-option label="事假" value="事假"></el-option>
            <el-option label="加班" value="加班"></el-option>
            <el-option label="调休" value="调休"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核状态">
          <el-select v-model="pageObject.vacationState" placeholder="请选择审核状态">
            <el-option label="不限" value="不限"></el-option>
            <el-option label="审核中" value="审核中"></el-option>
            <el-option label="已审核" value="已审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" style="width: 100%;">
        <!-- 列 -->
        <el-table-column label="职工" prop="userName" width="130" align="center"></el-table-column>
        <el-table-column label="申请类别" prop="vacationWay" width="130" align="center"></el-table-column>
        <el-table-column label="开始时间" prop="startTime" width="180" align="center"></el-table-column>
        <el-table-column label="结束时间" prop="endTime" width="180" align="center"></el-table-column>
        <el-table-column label="具体事由" prop="vacationContent" width="200" align="center"></el-table-column>
        <el-table-column label="申请状态" prop="vacationState" width="150" align="center"></el-table-column>
        <!-- <el-table-column label="申请时间" prop="quAnswer" width="200"></el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="x">
            <el-button type="success" size="mini" @click="approvalDialog(x.row)">审核</el-button>
            <el-button type="warning" size="mini" @click="del(x.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <!-- size-change：下拉框触发事件 -->
        <!-- current-change 页码触发事件 -->
        <!-- current-page 当前页码 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageObject.page" :page-sizes="[5, 10, 20, 40]" :page-size="5"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!-- 审核弹出框 -->
      <el-dialog title="审核" width="50%" :visible.sync="isShow">
        <el-form :model="vacation" label-width="120px">
          <el-form-item label="请求是否通过">
            <el-col :span="20">
              <el-radio v-model="vacation.vacationNo" label="通过">通过</el-radio>
              <el-radio v-model="vacation.vacationNo" label="未通过">未通过</el-radio>
            </el-col>
          </el-form-item>

          <el-form-item label="审核不通过原因">
            <el-col :span="20">
              <input type="hidden" v-model="vacation.userId">
              <el-input v-model="vacation.vacationNoWay"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="success" size="mini" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "question",
    data() {
      return {
        list: [], //当前页集合
        totalPage: "", //总页数
        total: 0, //总条数
       pageObject: { //分页对象
         page: 1,
         row: 5,
         userName: "",
         vacationWay:"",
         vacationState:""
       },
        isShow: false,
        vacation: {
          userId: 0,
          startTime: "",
          endTime: "",
          vacationWay: "",
          vacationContent: "",
          vacationState:"",
          vcationNo:"",
          vacationNoWay:"",
          vacationOrigin: "",
          vacationDestination: "",
          vacationTool: "",
          vacationExpense: "",
          userName:""
        },
      }
    },
    methods: {
      //加载
      loadData() {
        if(this.pageObject.vacationState=='不限'){
          this.pageObject.vacationState="";
        }
        if(this.pageObject.vacationWay=='不限'){
          this.pageObject.vacationWay="";
        }
        var self = this;
        this.$http.get("http://localhost:8080/vacation/list", {
            params: this.pageObject
          })
          .then(function(rs) {
            if (rs.data.success) {
              self.list = rs.data.data.list;
              self.totalPage = rs.data.data.totalPage;
              self.total = rs.data.data.total;
            }
          })
      },
      // 下拉框触发事件
      handleSizeChange(v) {
        this.question.row = v;
        this.loadData();
      },
      handleCurrentChange(v) {
        this.question.page = v;
        this.loadData();
      },
      //打开新增弹窗
      approvalDialog(obj) {
        this.isShow = true;
        this.vacation = obj;

        //清空
        // this.qs = {
        //   more: [],
        //   quType: "单选题"
        // };
      },
      save(){
        console.log(this.vacation);
        var self = this;
        this.$http.get("http://localhost:8080/vacation/updateVacationState", {
            params: this.vacation
          })
          .then(function(rs) {
            self.$message(rs.data.info);
            if (rs.data.success) {
              //关闭弹窗
              self.isShow = false;
              //刷新数据
              self.loadData();
            }
          })
      },
      del(obj) {
        var self = this;
        this.$confirm("你确定要删除吗", "提示")
          .then(function() {
            //ajax请求
            self.$http.get("http://localhost:8080/vacation/deleteVacation", {
                params: obj
              })
              .then(function(rs) {
                self.$message(rs.data.info);
                if (rs.data.success) {
                  //刷新数据
                  self.loadData();
                }
              })
          })
      }
    },
    mounted() {
      this.loadData();
    }
  }
</script>

<style>
</style>
